<!--
 * @Author: your name
 * @Date: 2021-07-23 13:56:22
 * @LastEditTime: 2021-07-28 14:34:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /sports-wechat/activity/matchInfo/components/groupList.vue
-->
<template>
  <view class="list-wrap">
    <view :class="['list-sticky', groupList.length <= 5 ? 'around' : '']">
      <text :class="['list-item', currentGroup == index ? 'active' : '']" v-for="(item,index) in groupList" :key="item.id" @click="$emit('getMatchList', index, item.id)">{{item.code}}组</text>
    </view>
  </view>
</template>

<script>
  export default {
    props: ['groupList', 'currentGroup']
  }
</script>

<style lang="scss" scoped>
.list-wrap {
  padding: 0 20rpx;
  width: 100%;
  box-sizing: border-box;
  position:fixed;
  top: 160rpx;
  background: #f2f2f2;
  z-index: 5;
  .list-sticky {
    display: flex;
    max-width: 730rpx;
    height: 88rpx;
    box-sizing: border-box;
    overflow-x: auto;
    background: #f2f2f2;
    &.around {
      justify-content: space-around;
    }
    .list-item {
      min-width: 80rpx;
      margin-right: 46rpx;
      padding-left: 20rpx;
      height: 88rpx;
      line-height: 88rpx;
      font-size: 28rpx;
      color: #333;
      position: relative;
      &:last-of-type {
        margin-right: 0;
      }
      &.active {
        color: #2E87FF;
      }
    }
  }
}
</style>